<template>
    <el-dialog :title="title" width="600px" :visible.sync="dialogVisible">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
            <el-form-item prop="name" label="部门名称">
                <el-input v-model="form.name" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item prop="all_name" label="部门全称">
                <el-input v-model="form.all_name" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="上级部门">
                <el-cascader v-model="form.pid" :disabled="type=='child'" :options="departOptions" :props="{checkStrictly: true, value: 'id', label: 'name', children: 'child'}" style="width: 100%;" @change="deptChange" />
            </el-form-item>
            <el-form-item prop="type" label="部门类型">
                <el-radio-group v-model="form.type">
                    <el-radio label="1">公司</el-radio>
                    <el-radio label="2">部门</el-radio>
                    <el-radio label="3">小组</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input v-model="form.sort" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.msg" type="text" placeholder="请输入" style="width: 100%;" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { saveDepart, departList } from '@/api/system'
import { deepClone } from '@/util'
export default { 
    name: 'ResvervationAddDialog',
    data() {
        return {
            dialogVisible: false,
            type: 'add',
            title: "新建部门",
            form: {
                name: '',
                all_name: '',
                pid: '',
                type: '',
                sort: '',
                msg: ''
            },
            departOptions: [],
            rules: {
                name: [{ required: true, message: '请输入部门名称', trigger: 'change' }],
                type: [{ required: true, message: '请选择部门类型', trigger: 'change' }],
                all_name: [{ required: true, message: '请输入部门全名', trigger: 'change' }]
            }
        }
    },
    activated() {
    },
    methods: {
        async showDialog(item, type) {
            await this.getOptions();
            this.dialogVisible = true;
            this.type = type;
            this.resetForm();
            this.resetParams();
            console.log(item, type)
            if (item && item.id && type == 'edit') {
                this.$nextTick(() => {
                    this.form = deepClone(item);
                    this.title = "编辑部门"
                })
            } else if (type == 'child') {
                this.$nextTick(() => {
                    this.form.pid = item.id;
                    this.title = "新建子项"
                })
            }
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.form = {
                name: '',
                all_name: '',
                pid: '',
                type: '',
                sort: '',
                msg: ''
            };
            
        },
        getOptions() {
            departList().then(res => {
                if (res.status == '1') {
                    this.departOptions = res.data.list || []
                }
            })
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    saveDepart(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        },
        deptChange(e) {
            this.form.pid = e.length ? e[e.length - 1] : ''
        }
    }
}
</script>